<template>
  <div class="nav">
    <div class="tab shouye" @click="navTo('/')"></div>
    <div class="tab liebiao" @click="navTo('/tour')"></div>
    <div class="tab gouwuche" @click="navTo('/cart')"></div>
    <div class="tab yonghu" @click="navTo('/user')"></div>
  </div>
</template>

<script>
export default {
  name: 'NavTab',
  props: {},
  methods: {
    navTo(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
.nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background: #eee;
}

.tab {
  width: 24px;
  height: 24px;
  background-size: contain;
}

.shouye {
  background-image: url('../assets/shouye.png');
}

.liebiao {
  background-image: url('../assets/daliebiao.png');
}

.gouwuche {
  background-image: url('../assets/gouwucheman.png');
}

.yonghu {
  background-image: url('../assets/yonghu.png');
}
</style>
